@charset "utf-8";
@import "option_common/option_common";
.rb{
     position: absolute;
   width: 100%;
   height: 100%;
   overflow: hidden;
    .rb_back{
        img{
            width: 100%;
            height: 100%;
        }
    }
    .rb_chearacter{
        position: absolute;
        top: r(100px);
        left: r(40px);
        img{
            width: 30%;
             animation: autoRotate 2s linear  1.3s infinite;
                   animation-fill-mode: forwards;
            &:nth-of-type(2){
                width: 20%;
                animation: autoRotate 2s linear  1.1s infinite;
                   animation-fill-mode: forwards;
            }
             &:nth-of-type(3){
                width: 15%;
                 animation: autoRotate 2s linear  1s infinite;
                   animation-fill-mode: forwards;
            }
        }
    }
    .rb_floweer{
        position: absolute;
          top: r(260px);
        right: r(-120px);
        z-index: 1;
        animation: flower_two 1s linear  2s infinite;
       animation-fill-mode: forwards;
        img{
            width: 50%;
        }
    }
    .rb_lamplight{
        position: absolute;
          top: r(0px);
        left: r(0px);
        img{
            width: 100%;
        }
    }
    .rb_car{
        position: absolute;
          top: r(280px);
        left: r(0px);
        animation:rbcar .2s 1000ms infinite;
        img{
            width: 100%;
        }
    }
    .rb_floweer2{
        position: absolute;
          top: r(280px);
        left: r(60px);
        opacity: 0;
         animation: flower 1s linear  2s infinite;
       animation-fill-mode: forwards;
        img{
            width: 50%;
        }
    }
}
@keyframes rbcar{
    form{
        top: r(280px);
//      left: r(0px);
    }
    to{
        top: r(290px);
//      left: r(30px);
    }
}
 @keyframes autoRotate{
        0%{
            opacity: 0;
        }
        to {
            transform:   translateY(-30px);
            opacity: 1;
        } 
 }
 @keyframes flower{
     0%{
         opacity: 0;
     }
     to{
         transform: translateX(-20px);
         opacity: 1;
     }
 }
  @keyframes flower_two{
     0%{
         opacity: 0;
     }
     to{
         transform: translateX(50px);
         opacity: 1;
     }
 }
